<template>
  <el-dropdown trigger="click" class="margin-right-btn">
    <el-button type="text" size="mini" class="el-dropdown-link" @click="loadDetail()">详情</el-button>
    <el-dropdown-menu slot="dropdown" class="task-detail">
      <el-form style="min-width: 300px;margin: 5px;">
        <template v-if="content.length == 0">无</template>
        <template v-else>
          <el-form-item v-for="(item,index) in content" :label="item.key + '：'">{{item.value}}</el-form-item>
        </template>
      </el-form>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  import access from '../api/access.js'

  export default {
    data() {
      return {
        content: []
      }
    },
    props: {
      activityInstanceId: {
        type: String,
        default: null
      }
    },
    methods: {
      loadDetail() {
        if (this.activityInstanceId && !this.content.length) {
          access.taskVariables(this.activityInstanceId).then(res => {
            this.content = res.data
          })
        }
      }
    }
  }
</script>

<style>
  .margin-right-btn {
    margin-right: 10px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    line-height: inherit !important;
  }
  
  .task-detail{
    max-height: 500px;
    max-width: 80%;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .task-detail .el-form-item {
    margin-bottom: 0px !important;
  }

  .task-detail .el-form-item__label {
    min-width: 200px;
    font-weight: 800;
  }
</style>
